<template>
  <div>
    <el-card>
      <!-- 搜索区 -->
      <el-row type="flex" justify="space-between">
        <el-form :model="queryData" :inline="true">
          <el-form-item prop="student_name">
            <el-input
              v-model.trim="queryData.student_name"
              placeholder="学员姓名"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select
              clearable
              v-model="queryData.subject_id"
              @change="subChange(queryData.subject_id)"
              placeholder="归属学科"
            >
              <el-option
                v-for="item in subjectList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              clearable
              v-model="queryData.class_id"
              placeholder="归属班级"
            >
              <el-option
                v-for="item in classNameList"
                :key="item.id"
                :label="item.class_name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              clearable
              v-model="queryData.student_state"
              placeholder="账号状态"
            >
              <el-option
                v-for="item in isState"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="Search" size="small" type="primary"
              >搜索</el-button
            >
            <el-button @click="Resetting" size="small">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row style="heigth: 40px">
          <el-button
            @click="$refs.uploadexcel.uploadShow = true"
            type="warning"
            size="small"
            >批量导入</el-button
          >

          <el-button
            @click="$refs.addstudent.showDialog = true"
            type="primary"
            size="small"
            >增加学员</el-button
          >
        </el-row>
      </el-row>
      <!-- 批量操作 -->
      <el-row v-if="isButton" style="padding-bottom: 30px">
        <el-button @click="changeState(2)" type="success">批量启用</el-button>
        <el-button @click="changeState(3)" type="warning">批量禁用</el-button>
        <el-button @click="changeDel" type="danger">批量删除</el-button>
      </el-row>
      <!-- 表格区域 -->
      <el-table
        @selection-change="selectChange = $event"
        border
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" label="序号" width="120">
        </el-table-column>
        <el-table-column prop="student_name" label="学生姓名" width="120">
        </el-table-column>
        <el-table-column prop="student_phone" label="手机号"> </el-table-column>
        <el-table-column prop="class_name" label="班级名称"> </el-table-column>
        <el-table-column prop="subject_name" label="学科名称">
        </el-table-column>
        <el-table-column prop="student_sex" label="性别">
          <template slot-scope="{ row }">
            <span>{{ row.student_sex == 1 ? "男" : "女" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="student_state" label="状态">
          <template slot-scope="{ row }">
            <el-button
              v-if="row.student_state === 0 || row.student_state === 3"
              size="small"
              type="info"
              plain
              disabled
              >禁用</el-button
            >
            <el-button
              v-if="row.student_state === 1"
              size="small"
              type="success"
              plain
              disabled
              >待审核
            </el-button>
            <el-button
              v-if="row.student_state === 2"
              size="small"
              type="success"
              plain
              disabled
            >
              正常</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="username" label="创建人"> </el-table-column>
        <el-table-column prop="created_at" label="创建时间"> </el-table-column>
        <el-table-column fixed="right" width="120" label=" 操作">
          <template slot-scope="{ row }">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="editHandler(row)"
            ></el-button>
            <el-button
              size="small"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delHeadler(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page.sync="queryData.page"
        :page-sizes="[10, 8, 5]"
        :page-size="queryData.limit"
        layout=" total,sizes, prev, pager, next,jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 弹框组件 -->
    <add-student
      ref="addstudent"
      :subjectLists="subjectList"
      @updateList="initData"
    ></add-student>
    <!-- <Import ref="uplaodexcel"></Import> -->
    <UploadExcel
      ref="uploadexcel"
      :uploadShow="isupload"
      @uploadData="uploadData"
    ></UploadExcel>
  </div>
</template>

<script>
import {
  getStudentListApi,
  getClassListApi,
  getStudentInfoApi,
  delStudentApi,
  ChangeStudentsState,
  uploadExcelApi,
} from "@/api/student";
import { getSubjectListApi } from "@/api/class";
import addStudent from "./add-stuedent.vue";
// import Import from './import.vue'
// import UploadExcel from '@/components/UploadExcel'
export default {
  name: "Student",
  components: {
    addStudent,
    //  UploadExcel,
  },
  data() {
    return {
      queryData: {
        page: 1,
        limit: 10,
        subject_id: "", //归属学科
        student_name: "",
        class_id: "",
        student_state: "", //状态
      },
      total: 0,
      isState: [
        { id: 0, value: "禁用" },
        { id: 1, value: "待审核" },
        { id: 2, value: "正常" },
      ], //账号状态
      classNameList: [], //班级
      tableData: [],
      subjectList: [],
      isButton: false, //批量操作按钮
      selectChange: [],
      // isShow:false
      isupload: false,
    };
  },
  watch: {
    selectChange: {
      handler(newVal, oldVal) {
        if (newVal.length !== 0) {
          this.isButton = true;
        } else {
          this.isButton = false;
        }
      },
      immediate: true,
    },
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
      //获取学生列表
      let res = await getStudentListApi(this.queryData);
      let res2 = await getSubjectListApi(); //归属学科下拉列表

      this.tableData = res.list;
      this.total = res.total;
      this.subjectList = res2;
      console.log(res);
      console.log(res2);
    },

    // 每页数量
    handleSizeChange(val) {
      this.queryData.limit = val;
      console.log(val);
      this.initData();
    },
    // 页码变化
    handleCurrentChange(val) {
      this.queryData.page = val;
      this.initData();
    },
    // 搜索功能
    Search() {
      this.initData();
    },
    Resetting() {
      (this.queryData.student_name = ""),
        (this.queryData.subject_id = ""),
        (this.queryData.student_state = ""),
        (this.queryData.class_id = ""),
        this.initData();
    },
    // 获取班级信息
    async subChange(val) {
      // console.log("ok");
      let classList = await getClassListApi({
        page: 1,
        limit: 10,
        subject_id: val,
      });
      console.log(classList);
      this.classNameList = classList.list;
    },

    // 添加
    addClick() {
      // this.isShow
      this.showDialog = true;
    },
    // 修改数据
    async editHandler(val) {
      let res = await getStudentInfoApi(val.id);
      console.log(res);
      this.$refs.addstudent.showDialog = true;
      this.$refs.addstudent.formData = res;
    },
    // 删除学生数据
    async delHeadler(id) {
      await this.$confirm("是否确认删除");
      await delStudentApi({ id: [id] });
      this.initData();
    },
    //批量启用禁用
    async changeState(val) {
      await this.$confirm("是否执行该操作？");
      let arr = [];
      //  获取id数组
      this.selectChange.forEach((item) => {
        arr.push(item.id);
      });
      console.log(arr);
      await ChangeStudentsState({
        id: arr,
        status: val,
      });
      this.$message.success("操作成功");
      this.initData();
    },
    //批量删除
    async changeDel() {
      await this.$confirm("是否执行删除操作？");
      let arr = [];
      //  获取id数组
      this.selectChange.forEach((item) => {
        arr.push(item.id);
      });
      await delStudentApi({ id: arr });
      this.$message.success("删除成功");
      this.initData();
    },
    async uploadData(data) {
      await uploadExcelApi({ list: data });
      this.$message.success("上传成功");
      this.$refs.uploadexcel.uploadShow = false;
      this.initData(); //更新数据
    },
  },
};
</script>

<style lang="scss" scoped></style>
